import React, { Fragment, useState, useEffect } from 'react';
import { Modal, Form, Input, Row, Col, notification } from 'antd';
import ExcelUpload from '@/components/ExcelUpload/ExcelUpload';
import { FormComponentProps } from 'antd/es/form';
import { uploadScores, scoresList } from '@/services/api';
import { SIZE, PAGE } from '@/utils/constant';

interface UserFormProps extends FormComponentProps {
  onClose: () => void;
  dispatch: any;
}

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
  },
  wrapperCol: {
    sm: { span: 18 },
  },
};
const { Item } = Form;
const DownloadModal = Form.create<UserFormProps>()(
  ({ form: { getFieldDecorator, validateFields }, onClose, dispatch }: any) => {
    const [uploadData, setUploadData] = useState([]);
    const [newLoadData, setNewLoadData] = useState([]);
    useEffect(() => {
      if (uploadData.length) {
        const newData: any = [];
        uploadData.forEach((item: any) => {
          const {
            id: student_id = '',
            语文: chinese = '',
            数学: math = '',
            英语: english = '',
            政治: politics = '',
            历史: history = '',
            地理: geographic = '',
            生物: biological = '',
            物理: physical = '',
            化学: chemical = '',
            体育: sport = '',
            音乐: music = '',
          } = item;
          newData.push({
            student_id,
            chinese,
            math,
            english,
            politics,
            history,
            geographic,
            biological,
            physical,
            chemical,
            sport,
            music,
          });
        });
        setNewLoadData(newData);
      } else {
        return;
      }
    }, [JSON.stringify(uploadData)]);
    return (
      <Fragment>
        <Form {...formItemLayout}>
          <Modal
            visible
            onCancel={onClose}
            maskClosable={false}
            width="80%"
            title="导入成绩"
            onOk={() => {
              validateFields((err: any, val: any) => {
                if (!err) {
                  newLoadData.forEach((item: any) => {
                    item.semester = val.semester;
                  });
                  uploadScores(newLoadData).then((resp: any) => {
                    if (resp.data) {
                      notification.success({
                        message: '上传成绩成功',
                      });
                      onClose();
                      dispatch({
                        type: 'OPEN_LOADING',
                      });
                      scoresList({ page: PAGE, size: SIZE })
                        .then((res: any) => {
                          if (res.status === 'success') {
                            dispatch({
                              type: 'GET_DATA',
                              payload: res.data.data,
                            });
                            dispatch({
                              type: 'CHANGE_PAGINATION',
                              payload: {
                                current: PAGE,
                                pageSize: SIZE,
                                total: res.data.meta.total,
                              },
                            });
                          }
                          dispatch({
                            type: 'CLOSED_LOADING',
                          });
                        })
                        .catch(() => {
                          dispatch({
                            type: 'CLOSED_LOADING',
                          });
                        });
                    }
                  });
                }
              });
            }}
          >
            <Row>
              <Col span={6}>
                <Item label="学期">
                  {getFieldDecorator('semester', {
                    rules: [
                      {
                        required: true,
                        message: '必填',
                      },
                    ],
                  })(<Input placeholder="请输入" />)}
                </Item>
              </Col>
            </Row>
            <ExcelUpload setUploadData={setUploadData} />
          </Modal>
        </Form>
      </Fragment>
    );
  },
);

export default DownloadModal;
